<template>
  <view class="register-container">
    <view class="register-content">
      <!-- 头部信息 -->
      <view class="header-section">
        <text class="page-title">创建账号</text>
        <text class="page-subtitle">加入数字家庭，开始美好时光</text>
      </view>

      <!-- 注册表单 -->
      <view class="form-section">
        <view class="form-item">
          <text class="form-label">用户名</text>
          <input 
            class="form-input" 
            v-model="registerForm.username" 
            placeholder="请输入用户名（4-20位字符）"
            maxlength="20"
          />
        </view>

        <view class="form-item">
          <text class="form-label">手机号</text>
          <input 
            class="form-input" 
            v-model="registerForm.phone" 
            placeholder="请输入手机号"
            type="number"
            maxlength="11"
          />
        </view>

        <view class="form-item">
          <text class="form-label">邮箱（可选）</text>
          <input 
            class="form-input" 
            v-model="registerForm.email" 
            placeholder="请输入邮箱地址"
            maxlength="50"
          />
        </view>

        <view class="form-item">
          <text class="form-label">密码</text>
          <input 
            class="form-input" 
            v-model="registerForm.password" 
            placeholder="请输入密码（6-20位）"
            password
            maxlength="20"
          />
        </view>

        <view class="form-item">
          <text class="form-label">确认密码</text>
          <input 
            class="form-input" 
            v-model="registerForm.confirmPassword" 
            placeholder="请再次输入密码"
            password
            maxlength="20"
          />
        </view>

        <!-- 注册按钮 -->
        <button 
          class="register-btn"
          @click="handleRegister"
          :disabled="!canRegister || registerLoading"
        >
          {{ registerLoading ? '注册中...' : '立即注册' }}
        </button>

        <!-- 用户协议 -->
        <view class="agreement-section">
          <view class="agreement-checkbox" @click="toggleAgreement">
            <view class="custom-checkbox" :class="{ checked: agreedToTerms }">
              <text class="checkbox-icon">{{ agreedToTerms ? '✓' : '' }}</text>
            </view>
            <text class="agreement-text">
              我已阅读并同意
              <text class="link-text" @click.stop="showAgreement('privacy')">《隐私政策》</text>
              和
              <text class="link-text" @click.stop="showAgreement('terms')">《用户协议》</text>
            </text>
          </view>
        </view>

        <!-- 登录链接 -->
        <view class="login-link" @click="goToLogin">
          <text class="link-text">已有账号？立即登录</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'RegisterPage',
  data() {
    return {
      registerLoading: false,
      agreedToTerms: false,
      registerForm: {
        username: '',
        phone: '',
        email: '',
        password: '',
        confirmPassword: ''
      }
    }
  },
  
  computed: {
    canRegister() {
      const { username, phone, password, confirmPassword } = this.registerForm
      return username.length >= 4 && 
             /^1[3-9]\d{9}$/.test(phone) && 
             password.length >= 6 && 
             password === confirmPassword &&
             this.agreedToTerms
    }
  },
  
  methods: {
    // 注册
    async handleRegister() {
      if (!this.canRegister) {
        this.showValidationError()
        return
      }
      
      this.registerLoading = true
      
      try {
        // TODO: 调用注册API
        const response = await this.$store.dispatch('user/register', {
          username: this.registerForm.username,
          phone: this.registerForm.phone,
          email: this.registerForm.email,
          password: this.registerForm.password
        })
        
        uni.showToast({
          title: '注册成功',
          icon: 'success'
        })
        
        // 注册成功后自动登录
        setTimeout(() => {
          this.autoLogin()
        }, 1500)
        
      } catch (error) {
        console.error('注册失败:', error)
        uni.showToast({
          title: error.message || '注册失败，请重试',
          icon: 'none'
        })
      } finally {
        this.registerLoading = false
      }
    },
    
    // 自动登录
    async autoLogin() {
      try {
        await this.$store.dispatch('user/accountLogin', {
          username: this.registerForm.username,
          password: this.registerForm.password
        })
        
        // 跳转到家庭创建页面
        uni.reLaunch({
          url: '/pages/family/create-simple'
        })
      } catch (error) {
        console.error('自动登录失败:', error)
        // 如果自动登录失败，跳转到登录页面
        uni.reLaunch({
          url: '/pages/login/login'
        })
      }
    },
    
    // 显示验证错误信息
    showValidationError() {
      const { username, phone, password, confirmPassword } = this.registerForm
      
      if (username.length < 4) {
        uni.showToast({
          title: '用户名至少4位字符',
          icon: 'none'
        })
      } else if (!/^1[3-9]\d{9}$/.test(phone)) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        })
      } else if (password.length < 6) {
        uni.showToast({
          title: '密码至少6位字符',
          icon: 'none'
        })
      } else if (password !== confirmPassword) {
        uni.showToast({
          title: '两次密码输入不一致',
          icon: 'none'
        })
      } else if (!this.agreedToTerms) {
        uni.showToast({
          title: '请先同意用户协议和隐私政策',
          icon: 'none'
        })
      }
    },
    
    // 切换协议同意状态
    toggleAgreement() {
      this.agreedToTerms = !this.agreedToTerms
    },
    
    // 显示协议内容
    showAgreement(type) {
      const title = type === 'privacy' ? '隐私政策' : '用户协议'
      uni.showToast({
        title: `${title}页面开发中`,
        icon: 'none'
      })
    },
    
    // 跳转到登录页面
    goToLogin() {
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss" scoped>
.register-container {
  min-height: 100vh;
  background: #fafafa;
  padding: 32rpx 24rpx;
}

.register-content {
  min-height: calc(100vh - 64rpx);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.header-section {
  text-align: center;
  margin-bottom: 48rpx;
  
  .page-title {
    display: block;
    font-size: 36rpx;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 12rpx;
  }
  
  .page-subtitle {
    font-size: 24rpx;
    color: #7f8c8d;
    line-height: 1.5;
  }
}

.form-section {
  background: #ffffff;
  border-radius: 12rpx;
  padding: 32rpx;
  border: 1px solid #f0f0f0;
  
  .form-item {
    margin-bottom: 24rpx;
    
    .form-label {
      display: block;
      font-size: 24rpx;
      color: #2c3e50;
      margin-bottom: 8rpx;
      font-weight: 500;
    }
    
    .form-input {
      width: 90%;
      height: 72rpx;
      padding: 0 24rpx;
      background: #fafafa;
      border: 1px solid #e0e0e0;
      border-radius: 8rpx;
      font-size: 26rpx;
      color: #2c3e50;
      
      &::placeholder {
        color: #95a5a6;
      }
      
      &:focus {
        background: #ffffff;
        border-color: #34495e;
      }
    }
  }
  
  .register-btn {
    width: 100%;
    height: 72rpx;
    background: #34495e;
    border-radius: 8rpx;
    font-size: 26rpx;
    font-weight: 500;
    color: #ffffff;
    border: none;
    margin: 32rpx 0 24rpx;
    
    &[disabled] {
      opacity: 0.6;
      background: #95a5a6;
    }
  }
  
  .agreement-section {
    margin-bottom: 24rpx;
    
    .agreement-checkbox {
      display: flex;
      align-items: flex-start;
      
      .custom-checkbox {
        width: 28rpx;
        height: 28rpx;
        border: 2px solid #e0e0e0;
        border-radius: 4rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 12rpx;
        flex-shrink: 0;
        
        &.checked {
          background: #34495e;
          border-color: #34495e;
          
          .checkbox-icon {
            color: #ffffff;
            font-size: 16rpx;
            font-weight: bold;
          }
        }
      }
      
      .agreement-text {
        flex: 1;
        font-size: 22rpx;
        color: #7f8c8d;
        line-height: 1.5;
        
        .link-text {
          color: #34495e;
          text-decoration: underline;
        }
      }
    }
  }
  
  .login-link {
    text-align: center;
    
    .link-text {
      font-size: 24rpx;
      color: #34495e;
      text-decoration: underline;
    }
  }
}
</style> 